<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>商品详情</title>
  <link rel="stylesheet" href="/static/admin/jingtaiwu/common.css">
  <link rel="stylesheet" type="text/css" href="/static/admin/jingtaiwu/swiper.min.css"/>
  <link rel="stylesheet" href="/static/admin/jingtaiwu/commodityDetails.css">
</head>
<style>
  /*自动隐藏文字*/
  .aui-ellipsis-1 {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  header {
    background: transparent;
    background-size: 100%;
    /*display: flex;*/
    position: fixed;
    justify-content: space-between;
    height: 0.32rem;
    width: 100%;
    top: 0.8rem;
    left: 0;
    float: left;
    z-index: 99999999999999999999999;
  }

  header .center {
    font-weight: 500;
    line-height: 0.32rem;
    font-size: 0.32rem;
    color: #fff;
    text-align: center;
  }

  .cheack {
    width: 3rem;
    z-index: 99999999999999999999999;
    bottom: 0.27rem;
    right: 0.33rem;
    position: absolute;
  }

  .cheack > div {
    float: right;
    width: 0.97rem;
    height: 0.38rem;
    border-radius: 0.1rem;
    background-color: #DDCDCA;
    line-height: 0.38rem;
    text-align: center;
    color: #454647;
    font-size: 0.24rem;
    margin-left: 0.23rem;
  }

  .cheackTrue {
    background-color: #FD7301;
    color: #fff;
  }

  .shoppingCart {
    width: 0.4rem;
    float: left;
    height: 0.4rem;
  }

  .right {
    position: absolute;
    right: 0;
    top: 0;
  }

  .app {
    background-color: #F1F1F1;
  }

  .fixed-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 0.96rem;
    background: white;
    box-shadow: 0rem -0.02rem 0.1rem 0rem rgba(222, 228, 234, 0.8);
    padding: 0 0.3rem;
  }

  .fixed-bottom img {
    width: 0.68rem;
    height: 0.68rem;
  }

  .info {
    flex: 1;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    height: 0.68rem;
    margin-left: 0.21rem;
  }

  .info .info-top {
    color: #3B3B3B;
    font-size: 0.26rem;
  }

  .info .info-bottom {
    color: #989898;
    font-size: 0.22rem;
  }

  .btn-download {
    width: 1.4rem;
    height: 0.58rem;
    text-align: center;
    line-height: 0.58rem;
    background: #F96B47;
    border-radius: 0.29rem;
    color: #FFFFFF;
    font-size: 0.24rem;
  }
  .recommendList {
    margin-right:0 ;
  }
</style>
<body>
<div id="app" v-cloak>
  <div class="app">
    <div class="swiper-container swiper-container1" id="shopDetailsSwiper" v-show="pic">
      <div class="cheack" v-if="typefile">
        <div class="pic" @click="cheack(1)" :class="{'cheackTrue': pic}">图片</div>
        <div class="video" @click="cheack(2)" :class="{'cheackTrue': video}">视频</div>
      </div>

      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for=" car in goods.p_banner">
          <img :src="car" alt="">
        </div>

      </div>
    </div>
    <div class="swiper-container " v-show="video">
      <div class="cheack">
        <div class="pic" @click="cheack(1)" :class="{'cheackTrue': pic}">图片</div>
        <div class="video" @click="cheack(2)" :class="{'cheackTrue': video}">视频</div>
      </div>
      <video :src="goods.p_video" style="width: 100%; height:100%" controls="controls"></video>
    </div>
    <div>
      <div class="introduceOne">
        <div>现价：
          <span v-if="goods.p_type =='1'">{{goods.p_now_price}}元 </span>
          <span v-if="goods.p_type =='2'">{{goods.p_jifen_price}}积分 </span>
          <span v-if="goods.p_type =='3'">{{goods.p_now_price}}元 &nbsp; <span v-if="goods.p_jifen_price">{{goods.p_jifen_price}}积分 </span></span>
        </div>
        <div><span v-if="goods.p_type =='1'">原价：{{goods.p_old_price}}元</span></div>
        <div>{{goods.p_name}}</div>
        <div>
          快递：
          <span v-if="goods.p_deliver_cate == '1'">包邮</span>
          <span v-if="goods.p_deliver_cate == '2'">自提</span>
          <span v-if="goods.p_deliver_cate == '3'">{{goods.p_postage}}元</span>
          <span v-if="goods.p_deliver_cate == '4'">到店消费</span>
          <span class="jin_right">月销：{{goods.p_sell_yet}}笔</span></div>
      </div>
      <div class="introduceTwo">
        <div @click="selectTime()" v-if="goods.p_type !='2'">
          <span class="jin_left">优惠</span><span class="jin_left">购买可得{{goods.p_give}}积分</span>
          <div class="jin_right">
            <img src="/static/admin/jingtaiwu/togo.png" alt="">
          </div>
          <div class="clear_fix"></div>
        </div>
        <div @click="specification()"><span class="jin_left">规格</span><span class="jin_left">{{shop.name}}</span>
          <div class="jin_right">
            <img src="/static/admin/jingtaiwu/togo.png" alt="">
          </div>
          <div class="clear_fix"></div>
        </div>
        <div @click="serve()">
          <span class="jin_left">服务</span>
          <div class="jin_left" v-for="equ in goods.p_equity">
            <img src="/static/admin/jingtaiwu/true.png" alt="" class="jin_left">
            <span class="jin_left">{{equ}}</span>
          </div>
          <div class="clear_fix"></div>
        </div>
        <div v-if="goods.p_type =='2'">
          <span class="jin_left">限购</span>
          <span class="jin_left" v-if="goods.p_buy_limit">每位用户限购{{goods.p_buy_limit}}件</span>
          <span class="jin_left" v-else>每位用户不限数量</span>
          <span class="jin_left">（积分商品不可退单）</span>
          <span class="clear_fix"></span>
        </div>
        <div class="clear_fix"></div>
      </div>
      <div class="introduceThree">
        <div>
          <img :src="goods.shop_img" alt="" class="jin_left">
        </div>
        <div>
          <div>{{goods.shop_name}}</div>
          <div>{{goods.shop_address}}</div>
        </div>
        <div @click="shopDe(goods.p_shop_id)">
          <img src="/static/admin/jingtaiwu/IntoShop.png" alt="">
          <span>进店逛逛</span>
        </div>
        <div class="clear_fix"></div>
      </div>
      <div class="commmodityevaluate">
        <div class="evaluateHeader">
          <div class="jin_left">评价（{{count}}）</div>
          <div class="jin_right" @click="countAll()">查看全部 ></div>
          <div class="clear_fix"></div>
        </div>
        <div class="evaluateList">
          <div class="jin_left">
            <img :src="first.user_image" alt="" v-if="first.user_image">
          </div>
          <div class="jin_left">
            <div>{{first.user_username}}</div>
            <div>{{first.app_time}}</div>
            <div>{{first.app_content}}</div>
            <div>
              <img :src="imgs" alt="" class="jin_left" v-for="imgs in first.app_imgs">
              <div class="clear_fix"></div>
            </div>
          </div>
          <div class="jin_right">
            <img src="/static/admin/jingtaiwu/shopstarTure.png" v-for="(type,index) in first.app_type" class="jin_left">
            <img src="/static/admin/jingtaiwu/shopStarFalse.png" v-for="imgs in length" class="jin_left">
          </div>
          <div class="clear_fix"></div>
        </div>
      </div>
      <div class="recommend">
        <div>店铺推荐</div>
        <div class="recommendList" v-for="list in arr" @click="commodityDetails(list.p_id)">
          <img :src="list.p_banner.split(',')[0]" alt="">
          <div>
            <span v-if="list.p_type =='1'">{{list.p_now_price}}元 </span>
            <span v-if="list.p_type =='2'">{{list.p_jifen_price}}积分 </span>
            <span v-if="list.p_type =='3'">{{list.p_now_price}}元 &nbsp; {{list.p_jifen_price}}积分 </span>
          </div>
          <div class="aui-ellipsis-1">{{list.p_name}}</div>
        </div>
        <div class="clear_fix"></div>
      </div>
    </div>
  </div>
  <div class="GraphicDetails">
    <div style="display: flex;align-items: center;width: 100%">
      <div class="hr"></div>
      <div class="center">图文详情</div>
      <div class="hr"></div>
    </div>
    <div class="GraphicDetailsList" v-html="goods.p_content" style="margin-top: 0.5rem">
    </div>
  </div>
  <div class="fixed-bottom">
    <img src="https://jintianjifen.oss-cn-shanghai.aliyuncs.com/f53953806ed6e7296fc76890aff4b7c9.jpg" alt="">
    <div class="info">
      <div class="info-top">支分宝</div>
      <div class="info-bottom">支分宝享品质生活</div>
    </div>
    <div class="btn-download" onclick="tz()">立即下载</div>
  </div>
</div>
<script src="/static/admin/jingtaiwu/polyfill.min.js"></script>
<script src="/static/admin/jingtaiwu/rem.js"></script>
<script type="text/javascript" src="/static/admin/jingtaiwu/jquery.min.js"></script>
<script type="text/javascript" src="/static/admin/jingtaiwu/swiper.min.js"></script>
<script src="/static/admin/jingtaiwu/vue.min.js"></script>
<script type="text/javascript" src="/static/admin/jingtaiwu/common.js"></script>
<script type="text/javascript" src="/static/admin/jingtaiwu/swiper.min.js"></script>
<!--<script src="/static/admin/jingtaiwu/vconsole.min.js"></script>-->
<script>
  var vm;
  // var vConsole = new VConsole();
  vm = new Vue({
    el: "#app",
    data: function() {
      return {
        sort: "multiple",
        sortId: "1",
        url: "",
        style: {
          // width: (api.winWidth - 40) / 2.5 + 'px'
        },
        shop: {
          m_name: "请选择规格"
        },
        type: 4,
        top: true,
        more: {},
        typefile: true,
        arr: {},
        goods: {},
        pageP: [{}],
        count: "",
        first: "",
        length: {},
        pic: true,
        video: false
      };
    },
    methods: {
      ShopDetails: function() {
        var _self = this;
        var data = {
          values: {
            p_id: _self.type
          }
        };
        postAjax(ApiUrl.apiusergoodsDetail, data, function(ret, err) {
          if (ret.status==200) {
            _self.goods = ret.msg.goods;
            _self.goods.p_banner = _self.goods.p_banner.split(",");
            if (_self.goods.p_video == "") {
              _self.typefile = false;
            }
            _self.goods.p_equity = _self.goods.p_equity.split(",");
            _self.count = ret.msg.count;
            _self.first = ret.msg.first || {};
            if (ret.msg.first) {
              _self.arr = ret.msg.arr;
              _self.model = ret.msg.model;
              for (i in _self.arr.p_banner) {
                if (_self.arr[i].p_banner) {
                  _self.arr[i].p_banner = _self.arr[i].split(",")[0];
                }
              }
            }
            _self.goods.p_content = indexofhtmlDiv1(_self.goods.p_content);
            _self.$nextTick(function() {
              _self.mySwiper = new Swiper(".swiper-container1", {
                loop: true,
                slidesPerView: "auto",
                speed: 300,
                autoplay: {
                  disableOnInteraction: false, //手动滑动之后不打断播放
                  delay: 2000
                },
                pagination: {
                  el: ".swiper-pagination"
                },
                on: {}
              });
            });
          }
        });
      }
    },
    created:function(){
      var _self = this;
      this.type = getQueryVariable("id");
      _self.ShopDetails();
    },
    mounted: function() {

    }
  });
  function getQueryVariable(variable) {
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i = 0; i < vars.length; i++) {
      var pair = vars[i].split("=");
      if (pair[0] == variable) {
        return pair[1];
      }
    }
    return false;
  }

  function tz() {
    if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
      var loadDateTime = new Date();
      window.location.href = "jintianjifen://productDetail?type=1&id="+getQueryVariable("id")
      window.setTimeout(function () {
        var timeOutDateTime = new Date();
        if (timeOutDateTime - loadDateTime < 5000) {
          window.location = 'itms-apps://itunes.apple.com/cn/app/wei/id1468418168';
        } else {
          window.close();
        }
      }, 2000);
    } else {
      window.location.href = "jintianjifen://productDetail?type=1&id="+getQueryVariable("id")
      window.setTimeout(function () {
        window.location.href = 'https://csdl.jintianjifen.cn/zhifenbao.apk';
      }, 2000);
    }
  }
</script>
</body>
</html>
